<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/allGoods.css">
    <link rel="stylesheet" href="../font_nx4w2dgra3g/iconfont.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/register copy.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <div class="con_nav">
        <div class="nav w1226">
            <ul class="nav_list">
                <li class="adad">
                    <!-- 登录 -->
                    <a href="javascript:;" class="login">登录</a>
                    <span class="sep">|</span>
                    <!-- 注册 -->
                    <a href="javascript:;" class="register">注册</a>
                </li>
                <li>
                    <a href="javascript:;" class="hy">xxx,欢迎你</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">我的收藏</a>
                </li>
                <li class="shopCart">
                    <span class="iconfont icon-24gl-cartFull2"></span>
                    <a href="javascript:;">购物车
                        <!-- <span class="num">(0)</span> -->
                    </a>
                </li>
            </ul>

        </div>
    </div>

    <!-- 导航 -->
    <div class="con_header">
        <div class="header w1226">
            <img src="../img/logo.c8999c02.png" alt="">
            <ul class="header_list">
                <li><a href="../html/zhuye.html">首页</a></li>
                <li><a href="javascript:;">全部商品</a></li>
                <li><a href="javascript:;">关于我们</a></li>
            </ul>
            <div class="input">
                <input type="text" autocomplete="off" placeholder="请输入搜索内容" class="input_l">
                <div class="input_r">
                    <button type="button" class="input_r_button">
                        <span class="iconfont icon-fangdajing"></span>
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- 内容 -->
    <div class="con_fenlei">
        <div class="fenlei w1226">
            <p>
                <a href="javascript:;">首页</a><span>></span>全部商品<span>></span>分类
            </p>
            <div class="classify">
                <span>分类</span>
                <ul>
                    <li>全部</li>
                    <li>手机</li>
                    <li>电视机</li>
                    <li>空调</li>
                    <li>电脑</li>
                    <li>耳机</li>
                    <li>保护膜</li>
                    <li>充电宝</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="con_shangping">
        <div class="shangping w1226">
            <ul class="shangping_list">
                <!-- <li>
                    <img src="../img/pic_21.png" alt="">
                    <h2>Redmi K30</h2>
                    <h3>120Hz流速屏，全速热爱</h3>
                    <p>1599元</p>
                </li> -->
            </ul>

            <div class="pagination">
                <ul class="pagination_list">
                    <li class="prev">
                        < </li>
                    <li><span class="pageTips">1/19</span></li>
                    <li class="next">></li>
                </ul>
            </div>
        </div>
    </div>



    <div class="con_end">
        <div class="end w1226">
            <div class="end_seven">
                <span class="iconfont icon-anquan"><a href="">七天无理由退换货</a></span>
                <span class="iconfont icon-anquan"><a href="">满99元全场免邮</a></span>
                <span class="iconfont icon-anquan"><a href="">100%品质保证</a></span>
            </div>
            <p>
                <a href="">首页</a><span>|</span>
                <a href="">全部商品</a><span>|</span>
                <a href="">关于我们</a><span></span>
            </p>
            <p>商城版权所有 © 2012-2021</p>
        </div>
    </div>
    </div>


    <!-- 登录弹框 -->
    <div class="loginBox">
        <p>登录<span class="loginBox_dl">×</span></p>
        <div class="denglu">
            <span class="iconfont icon-lianxiren"></span>
            <input type="text" class="denglu_zhanghao" placeholder="请输入账号">
        </div>

        <div class="pwd">
            <span class="iconfont icon-yanjing"></span>
            <input type="text" class="denglu_pwd" placeholder="请输入密码">
        </div>

        <div class="dl" id="dl">登录</div>
    </div>

    <!-- 注册弹框 -->
    <div class="registerBox">
        <p>注册<span class="registerBox_dl">×</span></p>
        <div class="zhuce">
            <span class="iconfont icon-lianxiren"></span>
            <input type="text" class="zhuce_zhanghao" placeholder="请输入账号">
        </div>

        <div class="pwds">
            <span class="iconfont icon-yanjing"></span>
            <input type="text" class="zhuce_pwd" placeholder="请输入密码">
        </div>

        <div class="pwdAgain">
            <span class="iconfont icon-yanjing"></span>
            <input type="text" class="zhuce_pwds" placeholder="请再次输入密码">
        </div>

        <div class="enter">注册</div>
    </div>

    <div id="mc"></div>
    <script>
        //分页
        var key = "";
        var orderCol = "id";
        var orderType = "asc";
        var pageIndex = 1;
        var showNum = 16;
        // ------------------------//
        var cookie = document.cookie;
        var tit_user = cookie.split("=")[1];
        var tit_user = getCookie("user");
        if (tit_user) {
            $(".adad").hide();
            $(".hy").show().text(`${tit_user},欢迎你`);
            $(".hy").click(function () {
                if (confirm("确定退出登录吗?")) {
                    setCookie("user", `${tit_user}`, day = -1, path = "/");
                    $(".adad").show();
                    $(".hy").hide();
                }
            })
        }

        //判断是否有cookie 并跳转购物车页面
        $(".shopCart a").click(function () {
            if (document.cookie) {
                location.href = "../html/shoppingCar.html";
            } else {
                alert("请先登录");
            }
        })

        //判断是否有cookie 并跳我的收藏页面
        $(".nav_list li").eq(3).click(function () {
            if (document.cookie) {
                location.href = "../html/myLikeGoods.html";
            } else {
                alert("请先登录");
            }
        })

        var html = "";

        //模糊查询
        $(".input_r_button").click(function () {
            var key = $(".input_l").val();
            if (key) {
                $(".shangping_list").empty();
                $(".shangping_list").html("");
                xr(key);
            }
        });

        $(".classify ul li").click(function () {
            var value = $(this).text()
            if (value === "全部") {
                $(".shangping_list").empty();
                $(".shangping_list").html("");
                xr();
            } else {
                $(".shangping_list").empty();
                $(".shangping_list").html("");
                xr(value);
            }

        });
        xr();



        function xr(key = "") {
            $.ajax({
                type: "get",
                url: "../php/isSearchLimit.php",
                data: {
                    key,
                    orderCol,
                    orderType,
                    pageIndex,
                    showNum
                },
                dataType: "json",
                success: function (result) {
                    var {
                        list,
                        status,
                        msg,
                        currentIndex,
                        count,
                        maxPage
                    } = result;
                    console.log(result);
                    if (status) {
                        if (list.length) {
                            var html = '';
                            // $(".shangping_list").remove("li");
                            list.forEach(({
                                goodsImg,
                                goodsName,
                                goodsPrice,
                                id
                            }) => {
                                html += `<li data_id="${id}">
                            <img src="${goodsImg}" alt="">
                            <h2 class="s2">${goodsName}</h2>
                            <p>${goodsPrice}</p>
                        </li>`
                            })
                            $(".shangping_list").html(html);
                            // $(".shangping_list").append(html);
                            pageIndex = pageIndex > maxPage ? maxPage : pageIndex;
                            $(".pageTips").html(`${currentIndex}/${maxPage}`);
                            // $(".prev").click(function() {
                            //     // console.log(111);
                            //     if (pageIndex <= 1) return false;
                            //     pageIndex--;
                            //     xr();
                            // })

                            let prev = document.querySelector('.prev')
                            prev.onclick = function () {
                                if (pageIndex <= 1) return false;
                                pageIndex--;
                                xr();
                            }

                            let next = document.querySelector('.next')
                            next.onclick = function () {
                                if (pageIndex >= maxPage) return false;
                                pageIndex++;
                                xr();
                            }
                            // $(".next").click(function() {
                            //     // console.log(222);

                            // })



                            $(".shangping_list li").click(function () {
                                var id = $(this).attr("data_id");
                                window.location.href = `./goodsDetails.html?id=${id}`;
                            })
                        } else {
                            alert("暂无数据");
                        }
                    } else {
                        alert(msg);
                    }

                }
            })
        }

        // function xr(key = "") {
        //     $.ajax({
        //         type: "get",
        //         url: "../php/isSearchLimit.php",
        //         data: {
        //             key
        //         },
        //         dataType: "json",
        //         success: function(result) {
        //             var {
        //                 list,
        //                 status,
        //                 msg
        //             } = result;
        //             html = '';
        //             if (list.length) {
        //                 list.forEach(({
        //                     goodsImg,
        //                     goodsName,
        //                     goodsPrice,
        //                     id
        //                 }) => {
        //                     html += `<li data_id="${id}">
        //                     <img src="${goodsImg}" alt="">
        //                     <h2>${goodsName}</h2>
        //                     <p>${goodsPrice}</p>
        //                 </li>`
        //                 })
        //                 $(".shangping_list").append(html);
        //                 // $(".shangping_list").append(html);

        //                 $(".shangping_list li").click(function() {
        //                     var id = $(this).attr("data_id");
        //                     window.location.href = `./goodsDetails.html?id=${id}`;
        //                 })
        //             } else {
        //                 alert("暂无数据");
        //             }
        //         }
        //     })
        // }
    </script>
</body>

</html>